<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sio - 跨境电商询盘助手</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <img src="images/logo.png" alt="Sio Logo" class="logo">
      <h1>Sio询盘助手</h1>
    </header>

    <div class="tab-container">
      <div class="tab-buttons">
        <button class="tab-btn active" data-tab="ocr">OCR识图</button>
        <button class="tab-btn" data-tab="shipping">运费查询</button>
      </div>

      <div class="tab-content active" id="ocr-tab">
        <div class="upload-area" id="dropZone">
          <input type="file" id="imageInput" accept="image/*" hidden>
          <div class="upload-icon">📷</div>
          <p>点击或拖拽图片至此处</p>
        </div>
        <div class="result-area">
          <div id="imagePreview"></div>
          <div id="ocrResult" class="result-box"></div>
          <button id="copyResult" class="action-btn">复制结果</button>
        </div>
      </div>

      <div class="tab-content" id="shipping-tab">
        <div class="shipping-form">
          <div class="form-group">
            <label>起始港口</label>
            <input type="text" id="origin" placeholder="例如: 深圳">
          </div>
          <div class="form-group">
            <label>目的港口</label>
            <input type="text" id="destination" placeholder="例如: 洛杉矶">
          </div>
          <div class="form-group">
            <label>货物重量 (kg)</label>
            <input type="number" id="weight" placeholder="输入重量">
          </div>
          <button id="searchRates" class="action-btn">查询运费</button>
        </div>
        <div id="ratesResult" class="result-box"></div>
      </div>

      <div class="exchange-rate-container">
        <div class="rate-input">
          <input type="number" id="amount" value="1" min="0">
          <select id="fromCurrency">
            <option value="USD">USD</option>
            <option value="CNY">CNY</option>
            <option value="EUR">EUR</option>
            <!-- 可以添加更多币种 -->
          </select>
        </div>
        <div class="rate-output">
          <span id="result">等待转换...</span>
          <select id="toCurrency">
            <option value="CNY">CNY</option>
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <!-- 可以添加更多币种 -->
          </select>
        </div>
      </div>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 